<template>
  <div class="course_menu">
    <el-tabs v-model="activeName" class="demo-tabs container" @tab-change="handleClickChange">
      <el-tab-pane label="会员专区" name="first" ><Vip v-if="activeName==='first'"></Vip></el-tab-pane>
      <el-tab-pane label="视频课" name="second" ><Video v-if="activeName==='second'"></Video></el-tab-pane>
      <el-tab-pane label="直播课" name="third" >
        <live v-if="activeName==='third'"></live>
      </el-tab-pane>

      <el-tab-pane label="线下课" name="fourth" >
        <offline v-if="activeName=='fourth'"></offline>
      </el-tab-pane>

      <el-tab-pane label="主题" name="five" >
        <theme v-if="activeName=='five'"></theme>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script setup lang="ts">
import {ref} from 'vue'
import type {TabsPaneContext} from 'element-plus'
import Vip from '@/views/course/vip/index.vue'
import theme from './theme/index.vue'
import live from './live/index.vue'
import offline from './offline/index.vue'
import Video from '@/views/course/video/index.vue'

const activeName = ref('first')

const handleClickChange = (TabPanelName:any)=>{
  activeName.value =TabPanelName
}
</script>

<style scoped lang="less">
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #111111;
  font-size: 32px;
  font-weight: 600;
}

.container {
  width: 1200px;
  margin: 0 auto;

}

.course_menu {
}
::v-deep(.el-tabs__nav)  {
  width: 100% !important;
  padding-left: 30%;
  padding-right: 30%;
}
::v-deep(.el-tabs__active-bar) {
  display: none;
}
::v-deep(.el-tabs__item){
  font-size: 16px;
}
::v-deep(.el-tabs__item.is-active){
  color: #111111;
}
</style>
